import * as React from "react"
import { View, ViewStyle, Text, TextStyle } from "react-native"
import { Modal } from "../modal"
import { px2dp } from "../../utils"
import { Button } from "../button"

const styledModal: ViewStyle = {
  alignItems: "center",
  justifyContent: "center",
  borderRadius: px2dp(6),
  width: px2dp(273),
  height: px2dp(200),
  backgroundColor: "#fff"
}

const styledTitle: TextStyle = {
  fontSize: px2dp(16),
  color: "#1a1c2a"
}

const styledSubTitle: TextStyle = {
  marginTop: px2dp(10),
  fontSize: px2dp(13),
  color: "#6d788e"
}

const styledCancel: ViewStyle = {
  width: px2dp(110),
  height: px2dp(46),
  borderWidth: px2dp(1),
  borderColor: "#9CA8B6",
  borderStyle: "solid",
  backgroundColor: "#fff"
}

const styledConfirm: ViewStyle = {
  marginLeft: px2dp(10),
  width: px2dp(110),
  height: px2dp(46),
  borderWidth: px2dp(1),
  borderColor: "#CF2A2A",
  borderStyle: "solid",
  backgroundColor: "#CF2A2A"
}

const styledBtnView: ViewStyle = {
  marginTop: px2dp(32),
  flexDirection: "row"
}

const styledBtnCancel: TextStyle = {
  fontSize: px2dp(17),
  color: "#1a1c2a"
}

const styledBtnConfirm: TextStyle = {
  fontSize: px2dp(17),
  color: "#fff"
}

export interface NormalModalProps {
  /**
   * Text which is looked up via i18n.
   */
  /**
   * The text to display if not using `tx` or nested components.
   */
  subTitle?: string

  /**
   * An optional style override useful for padding & margin.
   */
  style?: ViewStyle

  title: string

  onPress?: () => void

  visible: boolean

  closeModal: () => void

  confirmLogout: () => void
}

/**
 * Stateless functional component for your needs
 *
 * Component description here for TypeScript tips.
 */
export function NormalModal(props: NormalModalProps) {
  // grab the props
  const { visible, title, subTitle, closeModal, confirmLogout } = props
  return (
    <View>
      <Modal visible={visible}>
        <View style={{ alignItems: "center", justifyContent: "center" }}>
          <View style={styledModal}>
            <Text style={styledTitle}>{title}</Text>
            <Text style={styledSubTitle}>{subTitle}</Text>
            <View style={styledBtnView}>
              <Button style={styledCancel} onPress={closeModal}>
                <Text style={styledBtnCancel}>取消</Text>
              </Button>
              <Button style={styledConfirm} onPress={confirmLogout}>
                <Text style={styledBtnConfirm}>确定</Text>
              </Button>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  )
}
